<template>
  <div class="comments soft white">
    <slot name="before" />
    <ul class="comments-list">
      <li class="comments-item" v-for="comment in [...hotComments,...comments]" :key="comment.commentId">
        <div class="comments-main">
          <div class="avatar">
            <van-image class="avatar-image" :src="comment.user.avatarUrl" round width="2.5rem" height="2.5rem" />
          </div>
          <div class="comments-content">
            <div class="creator-name">
              <h4>{{ comment.user.nickname }}</h4>
            </div>
            <div class="comments-text">
              <p>{{ comment.content }}</p>
            </div>
          </div>
          <div class="details" v-if="comment.likedCount > 0">
            <button class="button">
              <van-icon class="micon" class-prefix="music" name="remen"/>
              <span>{{ getHot(comment.likedCount).value }}</span>
            </button>
          </div>
        </div>
        <div class="comments-bottom">
          <div class="time">
            {{formatTime(comment.time,'MM-dd hh:mm')}}
          </div>
        </div>
      </li>
    </ul>
  </div>

</template>

<style lang="scss" scoped>
.comments {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .comments-list {
    .comments-item {
      width: 80%;
      margin: .5rem auto;
      padding: 1rem;

      .comments-main {
        width: 100%;
        display: flex;
        align-items: flex-start;
        .avatar {
          width: 5rem;
        }

        .comments-content {
          width: 100%;

          .creator-name {

            h4 {
              font-weight: bold;
              font-size: 14px;
            }

          }

          .comments-text {
            margin-top: .5rem;
            font-size: 12px;
          }
        }

        .details {
          display: flex;
          justify-content: center;
          align-items: center;

          .button {
            display: flex;
            background-color: transparent;
            border: none;
            color: red;

            .micon {
              margin: 0 .2rem;
            }
          }
        }
      }
      .comments-bottom{
        margin-top: .5rem;
        .time{
          font-size: 12px;
          color: #999;
        }
      }

    }
  }
}
</style>

<script setup>
import {defineProps, watch, toRefs, computed} from "vue";
import {formatTime,toShortUnit} from "../../common/util";

let propDef = defineProps({
  comments: {
    type: Array,
    default:[]
  },
  hotComments: {
    type: Array,
    default:[]
  }
});
function getHot(n){
  return computed(()=>toShortUnit(n));
}
</script>